<script setup name="SgMap">
import { onMounted, onUnmounted, ref, watch } from "vue";
import { loadAsyncSDK } from "@/utils";
import MapStyle from "./MapStyle.vue";

let map = null;
const defaultOption = {
  // 地图绑定的DOM元素ID
  container: "map",
  // 默认缩放层级
  zoom: 11,
  // 地图中心点
  center: [104.07215905519934, 30.530927421802303],
  // 地图默认字体
  localIdeographFontFamily: "Microsoft YoHei",
  // 抗锯齿
  antialias: true
};

const props = defineProps({
  useMapBox: {
    type: Boolean,
    default: false
  },
  SDK: {
    type: Array,
    default: []
  },
  mapOption: {
    type: Object,
    default: {}
  }
});
const emit = defineEmits(["mapCreated", "mapLoad", "mapClick", "mapStyleLoad"]);
const showOptions = ref(false);

async function initMap() {
  await loadAsyncSDK([...props.SDK]);

  // 公司的思极地图 token
  await SGMap.tokenTask.login(
    "4ce3daa933ef3eaaa74a48ca66f279d7",
    "03e638a998463f6b8181be2c4dc4fb81"
  );

  createMap();
}

async function initMapboxMap() {
  await loadAsyncSDK([...props.SDK]);

  // 暂无 mapbox 的 token
  mapboxgl.accessToken = "";

  createMapboxMap();
}

async function createMapboxMap() {
  await destroyMap();

  map = new mapboxgl.Map({
    ...defaultOption,
    style: "mapbox://styles/mapbox/dark-v11", // style URL
    // 自定义配置
    ...props.mapOption
  });
  emit("mapCreated", { map });
  bindMapEvent();
}

async function createMap() {
  await destroyMap();

  map = new SGMap.Map({
    ...defaultOption,
    // 地图样式
    style: "aegis://styles/aegis/StreetsLight-v2",
    // style: {
    //   version: 8,
    //   name: "mapbox",
    //   glyphs: "aegis://fonts/aegis/{fontstack}/{range}.pbf",
    //   sources: {},
    //   layers: [
    //     {
    //       id: "background",
    //       type: "background",
    //       paint: {
    //         "background-color": "#ffffff" //底图颜色
    //       },
    //       interactive: true
    //     }
    //   ]
    // },
    // 自定义配置
    ...props.mapOption
  });
  emit("mapCreated", { map });
  bindMapEvent();
  // setMapControl()
}

function destroyMap() {
  return new Promise((resolve, reject) => {
    if (map) {
      map.remove();
      map = null;
    }
    setTimeout(() => {
      resolve();
    }, 200);
  });
}

function setMapControl() {
  if (!map) return;

  // 缩放
  map.addControl(new SGMap.NavigationControl());
  // 定位
  map.addControl(new SGMap.GeolocateControl());
  // 2/3D切换
  map.addControl(new SGMap.PitchControl());
  // 比例尺
  map.addControl(new SGMap.ScaleControl({ maxWidth: 80, unit: "metric" }));
}

function bindMapEvent() {
  if (!map) return;
  showOptions.value = true;
  map.on("load", function(e) {
    emit("mapLoad", { e, map });
  });
  map.on("style.load", function() {
    emit("mapStyleLoad", { map });
  });
  map.on("click", function(e) {
    console.log(137, e);
    console.log("拾取地图坐标：", e.lngLat);
    emit("mapClick", { e, map });
  });
}
function mapMouseleave(e) {
  emit("mapMouseleave", { e });
}

watch(
  () => props.mapOption,
  () => {
    createMap();
  },
  { deep: true }
);

onMounted(() => {
  if (props.useMapBox) {
    initMapboxMap();
  } else {
    initMap();
  }
});
onUnmounted(() => {
  destroyMap();
});
</script>

<template>
  <div class="map_box" @mouseleave="mapMouseleave">
    <div id="map"></div>
    <MapStyle v-if="showOptions" />
  </div>
</template>

<style lang="scss" scoped>
.map_box {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  #map {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
